<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>shoto</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/shoto.css"/>
</head>
<body>
<!--第一部分-->
<div class="bg">
    <div class="container header">
        <div >
            <img src="./img/shoto.png" alt=""/>
        </div>
        <div class="row" style="padding-top: 50px;">
            <div class="span6">
                <h2 style="color: white;padding-top: 90px;">字体样式</h2>
                <p style="color:white;padding-top: 40px;">Shoto is the easiest way to get the photos your friends have on their phone from your times together.</p>
                <div style="padding-top: 50px;">
                    <a href="#"><img src="./img/appStore.png" alt=""/></a>
                    <a href="#"><img src="./img/GooglePlay.png" alt=""/></a>
                </div>
                <div style="margin-top: 50px;">
                    <input type="text" name="phone" placeholder="Get Shoto. Enter phone #" style="width: 224px;height:27px; font-size: 18px;border-radius: 6px;">
                    <button class="anniu" >搜</button>
                </div>
            </div>
            <div class="span6" style="padding-left: 90px;margin-top:-20px;">
                <img src="./img/galaxy.png" alt=""/>
            </div>
        </div>
    </div>
</div>
<!--字体类型-->
<div>
    <div class="row">
        <div class="span6" style="padding-left: 125px;">
            <img src="./img/fantFamily.png" alt=""/>
        </div>
        <div class="span6" style="padding-top: 100px;">
            <img src="./img/icn-2.png" alt=""/>
            <h2 style="color:#3399ff; padding-top: 50px;">font-family字体类型</h2>
            <p style="padding-top: 10px;font-family: serif">这是serif字体</p>
            <p style="padding-top: 10px;font-family: fantasy">这是fantasy字体</p>
        </div>

    </div>
</div>
<!--字体大小-->
<div class="bg2">
    <div class="row">
        <div class="span7" style="padding-left: 200px;padding-top: 200px;">
            <img src="./img/icn-1.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">font-size字体大小</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">心跳动次动次感觉活着  20px大小字体</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 50%;">看韩剧吃零食  50%大小字体</p>
        </div>
        <div class="span4" style="padding-left: 50px;padding-top: 200px;">
            <img src="./img/size.png" alt=""/>

        </div>

    </div>
</div>
<!--字体风格-->
<div>
    <div class="row">
        <div class="span6" style="padding-left: 125px;">
            <img src="./img/style.png" alt=""/>
        </div>
        <div class="span6" style="padding-top: 50px;margin-left: -30px;">
            <img src="./img/icn-4.png" alt=""/>
            <h2 style="color:#3399ff; padding-top: 50px;">font-style字体风格</h2>
            <p style="padding-top: 10px;font-size: 18px;font-style: normal;">正常风格</p>
            <p style="padding-top: 10px;font-size: 18px;font-style: oblique;">oblique风格</p>
        </div>

    </div>
</div>
<!--字体粗细-->
<div class="bg2">
    <div class="row">
        <div class="span7" style="padding-left: 125px;padding-top: 200px;">
            <img src="./img/icn-5.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">font-weight字体粗细</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;font-weight: normal;">噢耶耶，噢啦啦 normal粗细</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;font-weight: bold;">噢耶耶，噢啦啦 bold粗细</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;font-weight: lighter;">噢耶耶，噢啦啦 lighter粗细</p>
        </div>
        <div class="span4" style="padding-left: 100px;padding-top: 100px;">
            <img src="./img/weight.png" alt=""/>

        </div>

    </div>
</div>
<!--字体颜色-->
<div>
    <div class="row">
        <div class="span6" style="padding-left: 125px;">
            <img src="./img/color.png" alt=""/>
        </div>
        <div class="span6" style="padding-top: 50px;">
            <img src="./img/icn-4.png" alt=""/>
            <h2 style="color:#3399ff; padding-top: 50px;">color字体颜色</h2>
            <p style="padding-top: 10px;font-size: 18px;color:#cccccc;">十六进制#cccccc</p>
            <p style="padding-top: 10px;font-size: 18px;color:pink;">pink</p>
            <p style="padding-top: 10px;font-size: 18px;color:rgb(25,75,35);">rgb(25,75,35)</p>
        </div>

    </div>
</div>
<!--文字阴影-->
<div class="bg2">
    <div class="row">
        <div class="span7" style="padding-left: 125px;padding-top: 200px;">
            <img src="./img/icn-5.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">text-shadow 文字阴影</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;text-shadow: 5px 5px 5px pink;">text-shadow: 5px 5px 5px pink噢耶耶，噢啦啦</p>
        </div>
        <div class="span4" style="padding-left: 100px;padding-top: 100px;">
            <img src="./img/shadow.png" alt=""/>

        </div>

    </div>
</div>
<!--行高-->
<div>
    <div class="row">
        <div class="span6" style="padding-left: 125px;">
            <img src="./img/height.png" alt=""/>
        </div>
        <div class="span6" style="padding-top: 50px;margin-left: -30px;">
            <img src="./img/icn-4.png" alt=""/>
            <h2 style="color:#3399ff; padding-top: 50px;">line-height字体行高</h2>
            <p style="padding-top: 10px;font-size: 18px;line-height:90%;">90%行高。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。</p>
            <p style="padding-top: 10px;font-size: 18px;line-height:150%;">150%行高。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。噢耶耶，噢啦啦。</p>
        </div>

    </div>
</div>
<!--字间距-->
<div class="bg2">
    <div class="row">
        <div class="span7" style="padding-left: 125px;padding-top: 200px;">
            <img src="./img/icn-5.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">letter-spacing 字间距</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;letter-spacing:10px;">Request Your Friend’s Photos</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;letter-spacing:20px;">Request Your Friend’s Photos</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;">字母与字母距离</p>
        </div>
        <div class="span4" style="padding-left: 100px;padding-top: 100px;">
            <img src="./img/spacing.png" alt=""/>

        </div>

    </div>
</div>
<!--单词距离-->
<div>
    <div class="row">
        <div class="span6" style="padding-left: 125px;">
            <img src="./img/wordSpacing.png" alt=""/>
        </div>
        <div class="span6" style="padding-top: 50px;margin-left: 50px;">
            <img src="./img/icn-4.png" alt=""/>
            <h2 style="color:#3399ff; padding-top: 50px;">word-spacing单词间距</h2>
            <p style="padding-top: 10px;font-size: 18px;word-spacing:10px;">Request Your Friend’s Photos</p>
            <p style="padding-top: 10px;font-size: 18px;word-spacing:20px;">Request Your Friend’s Photos</p>
        </div>

    </div>
</div>
<!--字体变形和大小写转换-->
<div class="bg2">
    <div class="row">
        <div class="span7" style="padding-left: 125px;padding-top: 200px;">
            <img src="./img/icn-5.png" alt=""/>
            <h2 style="color:#ffffff; padding-top: 50px;">font-variant字体变形</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;font-variant:historical-forms;">historical-forms属性</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;font-variant:small-caps;">small-caps属性</p>
            <h2 style="color:#ffffff; padding-top: 50px;">text-transform字母大小写转换</h2>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;text-transform:uppercase;">uppercase属性</p>
            <p style="color:#ffffff; padding-top: 10px;font-size: 20px;text-transform:capitalize;">capitalize属性</p>
        </div>
        <div class="span4" style="padding-left: 100px;padding-top: 250px;">
            <img src="./img/variant.png" alt=""/>

        </div>

    </div>
</div>

<!--第七部分-->
<div style="background-color: #2C3641;width: 100%;height: 300px;">
    <div class="row foot">
        <div class="span2">
            <a href=""><img src="./img/sd1.png" alt=""/></a>
        </div>
        <div class="span2">
            <a href=""><img src="./img/sd2.png" alt=""/></a>
        </div>
        <div class="span2">
            <a href=""><img src="./img/sd3.png" alt=""/></a>
        </div>
        <div class="span2">
            <a href=""><img src="./img/sd4.png" alt=""/></a>
        </div>
        <div class="span2">
            <a href=""><img src="./img/sd5.png" alt=""/></a>
        </div>
        <div class="span2">
            <a href=""><img src="./img/sd6.png" alt=""/></a>
        </div>
    </div>

</div>
<!--脚步-->
<footer>

    <div class="container row" style="margin-top: 50px;width: 949px;height: 130px;border-bottom: 1px solid #9f9ea2;">
        <div class="footer1 span4">
            <h2 style="color:#3399ff; ">Shoto</h2>
            <p style="color: #3399ff;">Never miss a photo again!</p>

        </div>
        <div class="footer2 span4" style="float: right;padding-top: 20px;">
            <a href="">
                <img src="./img/icon-ios.png" alt=""/>
            </a>
            <a href="">
                <img src="./img/icon-google.png" alt=""/>
            </a>

        </div>
    </div>

    <div class="container row" style="margin-top: 20px;width: 949px;height: 75px;">
        <div class="span2" style="color:#3399ff;">
            Shoto, Inc

        </div>
        <div class="span5" style="padding-left: 150px;">
            <a class="a" href="">Contact &nbsp &nbsp</a>
            <a class="a" href=""> &nbspInvestors &nbsp &nbsp </a>
            <a class="a" href=""> &nbspPrivacy &nbsp &nbsp </a>
            <a class="a" href=""> &nbspTerms &nbsp</a>
        </div>
        <div class="2" style="float: right">
            <a href="" style="margin-right: 20px;">
                <img src="./img/facebook-icn.png" alt=""/>
            </a>
            <a href="" style="margin-right: 20px;">
                <img src="./img/instagram.png" alt=""/>
            </a>
            <a href="">
                <img src="./img/twitter-icn.png" alt=""/>
            </a>

        </div>

    </div>


</footer>


</body>
</html>